<template>
    <div class="container">
        <BackBtn />
        <div class="content">
            <div class="title">基本信息</div>
            <div class="form">
                <div class="tip">
                    为了更新您的简历，请您点击“提交”并同意我们使用您的简历必要信息，如您不同意，请不要保存。
                </div>
                <van-form ref="formData">
                    <van-field name="uploader" required label="照片">
                        <template #input>
                            <van-uploader
                                v-model="fileList"
                                preview-size="70"
                                :max-count="1"
                            />
                        </template>
                    </van-field>
                    <van-field
                        v-model="infoData.name"
                        required
                        name="name"
                        label="姓名"
                        placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请填写姓名' }]"
                    />
                    <van-field name="radio" label="性别" required>
                        <template #input>
                            <van-radio-group
                                v-model="infoData.sex"
                                direction="horizontal"
                            >
                                <van-radio name="1">男</van-radio>
                                <van-radio name="2">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field
                        v-model="infoData.age"
                        readonly
                        required
                        name="age"
                        label="生日"
                        placeholder="点击选择生日日期"
                        @click="showAge = true"
                    />
                    <van-popup v-model:show="showAge" position="bottom">
                        <van-datetime-picker
                            type="date"
                            @confirm="onAge"
                            :min-date="minDate"
                            :max-date="maxDate"
                            @cancel="showAge = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="infoData.phone"
                        required
                        name="phone"
                        label="手机号"
                        placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                        v-model="infoData.year"
                        required
                        type="number"
                        name="year"
                        label="工作年限"
                        placeholder="请输入工作年限 如：11"
                        :rules="[
                            {
                                required: true,
                                message: '请填写工作年限 如：11',
                            },
                        ]"
                    />
                    <van-field
                        v-model="infoData.area"
                        required
                        name="area"
                        label="地区"
                        placeholder="请输入地区"
                        :rules="[{ required: true, message: '请填写地区' }]"
                    />

                    <van-field
                        v-model="infoData.email"
                        required
                        name="email"
                        label="邮箱"
                        placeholder="请输入邮箱"
                        :rules="[{ required: true, message: '请填写邮箱' }]"
                    />
                    <van-field
                        v-model="infoData.evaluation"
                        name="evaluation"
                        label="自我评价"
                        placeholder="请输入自我评价"
                        :rules="[{ required: true, message: '请填写自我评价' }]"
                    />
                </van-form>
            </div>
            <div class="title">工作经历</div>
            <div class="form">
                <van-form v-for="(item, index) in experData" :key="index">
                    <div class="van-dis">
                        <van-field
                            v-model="item.place"
                            name="place"
                            input-align="center"
                            placeholder="请输入地点"
                            :rules="[{ required: true, message: '请填写地点' }]"
                        />
                        <van-field
                            v-model="item.company"
                            name="company"
                            input-align="center"
                            placeholder="请输入公司"
                            :rules="[{ required: true, message: '请填写公司' }]"
                        />
                    </div>
                    <div class="van-dis">
                        <van-field
                            v-model="item.start"
                            readonly
                            input-align="center"
                            name="start"
                            placeholder="点击选择开始日期"
                            @click="onshowStart(index)"
                        />
                        <van-popup v-model:show="showStart" position="bottom">
                            <van-datetime-picker
                                type="date"
                                @confirm="onStart"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @cancel="showStart = false"
                            />
                        </van-popup>
                        <van-field
                            v-model="item.end"
                            readonly
                            input-align="center"
                            name="end"
                            placeholder="点击选择结束日期"
                            @click="onshowEnd(index)"
                        />
                        <van-popup v-model:show="showEnd" position="bottom">
                            <van-datetime-picker
                                type="date"
                                @confirm="onEnd"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @cancel="showEnd = false"
                            />
                        </van-popup>
                    </div>
                </van-form>
                <div class="addList" @click="addexperData">
                    <van-icon name="plus" size=".4rem" />
                </div>
            </div>
            <div class="title">教育信息</div>
            <div class="form">
                <van-form v-for="(item, index) in educateData" :key="index">
                    <van-field
                        v-model="item.entrance"
                        is-link
                        readonly
                        name="entrance"
                        label="入学时间"
                        placeholder="点击选择入学时间"
                        @click="onshowEntrance(index)"
                    />
                    <van-popup v-model:show="showEntrance" position="bottom">
                        <van-datetime-picker
                            type="date"
                            @confirm="onEntrance"
                            :min-date="minDate"
                            :max-date="maxDate"
                            @cancel="showEntrance = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="item.graduation"
                        is-link
                        readonly
                        name="graduation"
                        label="毕业时间"
                        placeholder="点击选择毕业时间"
                        @click="onshowGraduation(index)"
                    />
                    <van-popup v-model:show="showGraduation" position="bottom">
                        <van-datetime-picker
                            type="date"
                            @confirm="onGraduation"
                            :min-date="minDate"
                            :max-date="maxDate"
                            @cancel="showGraduation = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="item.school"
                        name="school"
                        label="学校"
                        placeholder="请输入学校"
                        :rules="[{ required: true, message: '请填写学校' }]"
                    />
                    <van-field
                        v-model="item.diploma"
                        is-link
                        readonly
                        name="diploma"
                        label="学历"
                        placeholder="点击选择学历"
                        @click="onshowDiploma(index)"
                    />
                    <van-popup v-model:show="showDiploma" position="bottom">
                        <van-picker
                            :columns="columns"
                            @confirm="onDiploma"
                            @cancel="showDiploma = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="item.major"
                        name="major"
                        label="专业"
                        placeholder="请输入专业"
                        :rules="[{ required: true, message: '请填写专业' }]"
                    />
                    <van-field name="radio" label="留学经历">
                        <template #input>
                            <van-radio-group
                                v-model="item.abroad"
                                direction="horizontal"
                            >
                                <van-radio name="是">是</van-radio>
                                <van-radio name="否">否</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-form>
                <div class="addList" @click="addeducateData">
                    <van-icon name="plus" size=".4rem" />
                </div>
            </div>
            <div class="title">求职意向</div>
            <div class="form">
                <van-form v-for="(item, index) in intentionData" :key="index">
                    <van-field
                        v-model="item.city"
                        name="city"
                        label="城市"
                        placeholder="请输入城市"
                        :rules="[{ required: true, message: '请填写城市' }]"
                    />

                    <van-field
                        v-model="item.function"
                        name="function"
                        label="职位"
                        placeholder="请输入职位"
                        :rules="[{ required: true, message: '请填写职位' }]"
                    />
                    <van-field
                        v-model="item.salary"
                        is-link
                        readonly
                        name="salary"
                        label="期望薪资"
                        placeholder="请输入期望薪资"
                        @click="onshowSalary(index)"
                    />
                    <van-popup v-model:show="showSalary" position="bottom">
                        <van-picker
                            @confirm="onSalary"
                            :columns="salary"
                            @cancel="showSalary = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="item.time"
                        is-link
                        readonly
                        name="time"
                        label="到岗时间"
                        placeholder="点击选择到岗时间"
                        @click="onshowTime(index)"
                    />
                    <van-popup v-model:show="showTime" position="bottom">
                        <van-picker
                            :columns="times"
                            @confirm="onTime"
                            @cancel="showTime = false"
                        />
                    </van-popup>
                </van-form>
                <div class="addList" @click="addintentionData">
                    <van-icon name="plus" size=".4rem" />
                </div>
            </div>
            <div style="padding: 16px 0">
                <van-button round block type="primary" @click="onSubmit">
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import BackBtn from "@/components/BackBtn";
import axios from "@/api/axios.js";
import qs, { stringify } from "qs";
import { Toast } from "vant";
export default {
    components: {
        BackBtn,
    },
    data() {
        return {
            // 日期最小/日期最大
            minDate: new Date(1970, 1, 1),
            maxDate: new Date(),
            activeIndex: "",
            newImage: "",
            // 基本信息
            showAge: false, //日期弹框
            fileList: [],
            infoData: {
                name: "",
                sex: "1",
                age: "",
                phone: "",
                year: "",
                area: "",
                email: "",
                evaluation: "",
            },
            //工作经历
            showStart: false,
            showEnd: false,
            experData: [
                {
                    place: "",
                    company: "",
                    start: "",
                    end: "",
                },
            ],
            //教育信息
            showEntrance: false,
            showGraduation: false,
            showDiploma: false,
            columns: ["小学", "中学", "中专", "大专", "大学", "研究生", "博士"],
            educateData: [
                {
                    entrance: "",
                    graduation: "",
                    school: "",
                    diploma: "",
                    major: "",
                    abroad: "否",
                },
            ],
            //求职意向
            showTime: false,
            showSalary: false,
            times: ["随时到岗", "1周内", "1个月内", "3个月内", "待定"],
            intentionData: [
                {
                    city: "",
                    function: "",
                    salary: "",
                    // industry: "",
                    // type: "全职",
                    time: "",
                },
            ],
            salary: [
                "1000-2000",
                "2001-4000",
                "4001-6000",
                "6001-8000",
                "8001-10000",
                "10001-15000",
                "15001-20000",
                "20001以上",
            ],

            newfile: "", //更新头像
        };
    },
    methods: {
        dateInit(d) {
            return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
        },
        //基本信息-生日
        onAge(date) {
            this.infoData.age = this.dateInit(date);
            this.showAge = false;
        },
        //工作经历
        onshowStart(index) {
            this.activeIndex = index;
            this.showStart = true;
        },
        onStart(date) {
            this.experData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.start = this.dateInit(date);
                }
            });
            this.showStart = false;
        },
        onshowEnd(index) {
            this.activeIndex = index;
            this.showEnd = true;
        },
        onEnd(date) {
            this.experData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.end = this.dateInit(date);
                }
            });
            this.showEnd = false;
        },
        addexperData() {
            let data = {
                place: "",
                company: "",
                start: "",
                end: "",
            };
            this.experData.push(data);
            console.log(this.experData);
        },
        //教育信息
        onshowEntrance(index) {
            this.activeIndex = index;
            this.showEntrance = true;
        },
        onshowGraduation(index) {
            this.activeIndex = index;
            this.showGraduation = true;
        },
        onshowDiploma(index) {
            this.activeIndex = index;
            this.showDiploma = true;
        },
        onEntrance(date) {
            this.educateData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.entrance = this.dateInit(date);
                }
            });
            this.showEntrance = false;
        },
        onGraduation(date) {
            this.educateData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.graduation = this.dateInit(date);
                }
            });
            this.showGraduation = false;
        },
        onDiploma(data) {
            this.educateData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    console.log(i);
                    item.diploma = data;
                }
            });
            this.showDiploma = false;
        },
        addeducateData() {
            let data = {
                entrance: "",
                graduation: "",
                school: "",
                diploma: "",
                major: "",
                abroad: "否",
            };
            this.educateData.push(data);
        },
        //求职意向
        onshowTime(index) {
            this.activeIndex = index;
            this.showTime = true;
        },
        onshowSalary(index) {
            this.activeIndex = index;
            this.showSalary = true;
        },
        onTime(data) {
            this.intentionData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.time = data;
                }
            });
            this.showTime = false;
        },
        onSalary(data) {
            this.intentionData.forEach((item, i) => {
                if (i == this.activeIndex) {
                    item.salary = data;
                }
            });
            this.showSalary = false;
        },
        addintentionData() {
            let data = {
                city: "",
                function: "",
                salary: "",
                // industry: "",
                // type: "全职",
                time: "",
            };
            this.intentionData.push(data);
        },
        //获取base64头像
        getBase64(url) {
            axios.get(`/hkrc/app/getImage?images=${url}`).then((res) => {
                // console.log(res.data);
                let url = "data:image/png;base64," + res.data.files;
                this.fileList.push({
                    content: url,
                    url: url,
                    isImage: true,
                });
            });
        },
        //提交
        onSubmit() {
            let personEducData = [];
            let personWorkBgData = [];
            let personJobSeeData = [];

            this.educateData.forEach((item) => {
                personEducData.push({
                    startSchTime: item.entrance,
                    finishSchTime: item.graduation,
                    schoolName: item.school,
                    education: item.diploma,
                    special: item.major,
                    isAbroad: item.abroad,
                });
            });
            this.experData.forEach((item) => {
                personWorkBgData.push({
                    workAddr: item.place,
                    workEmp: item.company,
                    workTime: item.start + "至" + item.end,
                });
            });
            this.intentionData.forEach((item) => {
                personJobSeeData.push({
                    arrivalTime: item.time,
                    position: item.function,
                    treatment: item.salary,
                    jobAddr: item.city,
                });
            });
            let newUuid = "";
            let file = "";
            if (this.$route.params.type == 2) {
                newUuid = this.$store.state.uuid;
            } else {
                newUuid = "";
            }
            if (this.fileList[0].content) {
                file = this.fileList[0].content.split(";base64,");
                this.newfile = file[1];
            }
            let personInfoData = {
                uuid: newUuid,
                username: this.infoData.name,
                loginname: this.$store.state.uuid,
                password: this.$store.state.uuid,
                sex: this.infoData.sex,
                birthday: this.infoData.age,
                phone: this.infoData.phone,
                startJobTime: this.infoData.year,
                addr: this.infoData.area,
                mail: this.infoData.email,
                self_evaluation: this.infoData.evaluation,
            };

            let data = {
                infoId: this.$store.state.uuid,
                images: this.newfile,
                personInfoJson: JSON.stringify(personInfoData),
                personEducJson: JSON.stringify(personEducData),
                personWorkBgJson: JSON.stringify(personWorkBgData),
                personJobSeeJson: JSON.stringify(personJobSeeData),
            };

            axios.post("/hkrc/person/savePerson", data).then((res) => {
                console.log(res);
                if (res.success) {
                    Toast.success("保存成功");
                }else{
                     Toast.fail(res.msg);
                }
            });
        },
    },
    created() {
        if (JSON.stringify(this.$route.params.data) == undefined) {
            console.log("没有数据");
        } else {
            // console.log(1);
            let data = JSON.parse(this.$route.params.data);
            this.infoData = {
                name: data.username,
                sex: JSON.stringify(data.sex),
                age: data.birthday,
                phone: data.phone,
                year: data.startJobTime,
                area: data.addr,
                email: data.mail,
                evaluation: data.self_evaluation,
            };
            //获取头像
            this.getBase64(data.head_img);
            // 清空工作经历数据
            this.experData = [];
            data.pwbg.forEach((item) => {
                let time = item.workTime.split("至");
                this.experData.push({
                    place: item.workAddr,
                    company: item.workEmp,
                    start: time[0],
                    end: time[1],
                });
            });
            // 教育数据
            this.educateData = [];
            data.edu.forEach((item) => {
                this.educateData.push({
                    entrance: item.startSchTime,
                    graduation: item.finishSchTime,
                    school: item.schoolName,
                    diploma: item.education,
                    major: item.special,
                    abroad: item.isAbroad,
                });
            });
            // 求职意向
            this.intentionData = [];
            data.pjs.forEach((item) => {
                this.intentionData.push({
                    city: item.jobAddr,
                    function: item.position,
                    salary: item.treatment,
                    // industry: item.,
                    // type: "全职",
                    time: item.arrivalTime,
                });
            });
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: auto;
    background: #f5f6f8;
    .content {
        padding: 0 18.5px;
        .title {
            padding-top: 15px;
            font-size: 14px;
            font-weight: bold;
            color: #000;
        }
        .form {
            margin-top: 10px;
            background: #fff;
            padding: 5px;
            .addList {
                margin-top: 10px;
                width: 100%;
                padding: 5px 0;
                text-align: center;
                background: #eee;
                border-radius: 5px;
            }
            .tip {
                font-size: 10px;
                color: #000;
                background: #f5f5f5;
                padding: 5px;
            }
            .van-dis {
                display: flex;
                align-items: center;
                justify-content: space-between;
                // .van-field {
                //     flex: 1;
                //     border-bottom: 1px solid #eee;
                //     &::after {
                //         border-bottom: none;
                //     }
                // }
            }
        }
    }
}
</style>